<template>
  <div class="player-cover" v-if="isSong">
	  <div class="player-pure-container">
	  	<div class="player-pure-top-light player-pure-top">
	  		<div class="player-record">
	  			<div class="player-record-support">
	  				<img src="@/assets/player/play-bar-support.png" >
	  			</div>
				<div class="player-record-bar">
					<img src="@/assets/player/play-bar.png" >
				</div>
				<div class="player-pure-pic-light player-pure-pic">
					<img :src="song.pic" alt="" style="width: 100%;border-radius: 50%;"/>
				</div>
	  		</div>
			<div class="player-pure-lyric" >
				<div class="player-pure-title">
					<p>{{song.name}}</p>
					<p>{{song.artist}}</p>
				</div>
				<div class="pure-lyric">
					<lyric :lyric="lyric"></lyric>
				</div>
				
			</div>
	  	</div>
		<div class="play-comments">
			<comment :commentsList="commentsList" :id="commentParams.id"></comment>
			<el-pagination
			   @size-change="handleSizeChange"
			   @current-change="handleCurrentChange"
			   :current-page="commentParams.offset"
			   :page-sizes="[20, 30, 40, 50]"
			   :page-size="commentParams.limit"
			   layout="total, sizes, prev, pager, next, jumper"
			   :total="total">
			 </el-pagination>
		</div>
	  </div>
	  <span @click="isFullHandle">
	  	<i class="el-icon-copy-document"></i>
	  </span>
	   
  </div>
</template>

<script>

import {_getLyric,_getMusicComment} from 'network/detail.js';
import {parseLyric} from 'utils/parseLyric.js'
import lyric from './lyric.vue'
import Comment from '@/views/list-detail/childsPage/comment.vue'
export default {
  name: 'playerCover',
  components: {lyric,Comment},
  props:['song','isSong'],
  data(){
	  return{
		lyric:null,
		lyricArray:[],
		commentParams:{
			id:null,
			limit:20,
			offset:1,
		},
		commentsList:[],
		total:null
	  }
  },
   created() {
       this.getLyric();
	   this.getMusicComment();
    }, 
	watch: {
	
	},
	filters:{
	},
	methods:{
		getLyric(){
			console.log(this.song)
			_getLyric(this.song.id).then(res=>{
				  this.lyric = (res.data.lrc && res.data.lrc.lyric) || "暂无歌词";
				  this.lyricArray = parseLyric(this.lyric);
			})
		},
		getMusicComment(){
			this.commentParams.id=this.song.id
			_getMusicComment(this.commentParams).then(res=>{
				this.commentsList = res.data.comments;
				this.total = res.data.total;
			})
		},
		isFullHandle(){
			this.isSong=false;
			this.$emit('isFullHandle');
		},
		handleSizeChange(val){
			this.commentParams.offset=1;
			this.commentParams.limit=val;
			this.getMusicComment();
		},
		handleCurrentChange(val){
			this.commentParams.offset=val;
		    this.getMusicComment();
		}
	}
}
</script>

<style lang="less" scoped>
.player-cover {
	width: 100%;
	 height:calc(100vh - 58px - 60px);
	 z-index: 2;
     background: #fff;
	overflow-y: auto;
	position: absolute;
	left: 0;
	bottom: 60px;
	.player-pure-container{
		padding: 0 250px;
		.player-pure-top-light{
			background: radial-gradient(closest-side, #928e8d, #fff);
		}
		.player-pure-top{
			height: 400px;
			display: flex;
			.player-record{
				flex:1;
				position: relative;
				.player-record-support{
					width: 24px;
					height:24px;
					border-radius: 50%;
					overflow: hidden;
					position: absolute;
					z-index: 3;
					left: 0;
					right: 0;
					top: 0;
					margin: auto;
					img {
						width: 100%;
					}
				}
				.player-record-bar{
					    width: 80px;
						height: 200px;
					    transform-origin: 0 0;
					    transform: rotate(-7deg);
					    transition: transform 0.3s;
					    position: absolute;
					    z-index: 2;
					    left: 49%;
					    top: 10px;
						img{
							width: 100%;
						}
					
				}
				.player-pure-pic-light{
					box-shadow: 0 0 0.71429rem #918a85;
				}
				.player-pure-pic{
					width: 240px;
					height: 240px;
					border: 40px solid #0e0e11;
				    border-radius: 50%;
				    position: absolute;
				    left: 0;
				    right: 0;
				    top:50px;
					margin: auto;
					-webkit-animation: rotate 20s linear infinite;
					animation: rotate 20s linear infinite;
				}
				
			}
			
			.player-pure-lyric {
				position: relative;
				width: 40%;
				overflow: hidden;
				line-height: 40px;
				.player-pure-title{
					height: 60px;
					font-size: 24px;
					padding-top: 20px;
				}
				.pure-lyric{
					position: absolute;
				}
			}
		}
		.play-comments{
			height: 200px;
			// overflow-y: scroll;
		}
	}
	
}
span{
	position: fixed;
	right: 220px;
	top: 60px;
	.el-icon-copy-document{
		font-size: 24px;
		color: #808080;
	}
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(1turn);
  }
}
</style>


